<template>
  <div class="table-container" style="width: 60%;" >
  	<form id="edit-user-profile-form" method="post" enctype="multipart/form-data">
  		<table class="edit-table">
  			<tr>
  				<th>电子邮箱：</th>
  				<td>
  					<input class="easyui-textbox" id="profile-email" name="email" style="height: 60%;"/>
  				</td>
  				<th>联系电话：</th>
  				<td>
  					<input class="easyui-textbox" id="profile-phone" name="phone" style="height: 60%;"/>
  				</td>
  			</tr>
  			<tr>
  				<th>身份证号：</th>
  				<td>
  					<input class="easyui-textbox" id="profile-idCard" name="idCard" style="height: 60%;"/>
  				</td>
  				<th>联系地址：</th>
  				<td>
  					<input class="easyui-textbox" id="profile-address" name="address" style="height: 60%;"/>
  				</td>
  			</tr>
  			<tr>
  				<th rowspan="2">用户头像：</th>
  				<td>
  					<img src="../../assets/img/a.png" id="profile-head-image" class="radius-img" style="width:150px;" />
  				</td>
  				<th rowspan="2">电子签名：</th>
  				<td>
  					<img id="profile-sign-image" style="width:200px;" />
  				</td>
  			</tr>
  			<tr>
  				<td>
            <div style="float: left; height: 100%; padding-right: 5px;">
  					<input class="easyui-filebox" id="profile-headImage" name="headImageFile" style="height: 60%;"/>
            </div>
            <div style="float: left;">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="fileList">
              <el-button size="mini">选择文件</el-button>
            </el-upload>
            </div>
  				</td>
  				<td>
  					<input class="easyui-filebox" id="profile-signImage" name="signImageFile" style="height: 60%;"/>
  				</td>
  			</tr>
  			<tr>
  				<th>默认首页：</th>
  				<td colspan="3">
  					<select class="easyui-combotree" id="profile-defaultMenu" name="defaultMenuId" style="height:28px;width: 170px;">
  					</select>
  				</td>
  			</tr>
        <tr>
        	<td colspan="4">
            <button style="float: right;">保存</button>
            <button style="float: right;">关闭</button>
        	</td>
        </tr>
  		</table>
  	</form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
      }
    }
  }
</script>
<style>
  .table-container {
  	margin: 0 auto;
  	width: 98%;
  	margin-top: 15px;
  	margin-bottom: 15px;
  }
  .edit-table{
  	border: 1px solid #dddddd;
  	border-collapse: collapse;
  	font-size: 13px;
  	width: 100%;
  }
  .edit-table th {
  	background-color: #f4f4f4;
  	border: 1px solid #dddddd;
  	font-weight: bold;
  	height: 34px;
  	padding: 5px;
  	text-align:right;
  }
  .edit-table td {
  	background-color: #ffffff;
  	border: 1px solid #dddddd;
  	height: 34px;
  	padding: 5px;
  	text-align: left;
  }
  .radius-img {
  	border-radius: 50%;
  }
</style>
